<template>
  <div >
    <!--    面包屑+新增按钮+批量删除按钮+搜索框和按钮-->
    <div>
      <div style="height: 30px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">课程管理</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="width: 105%;height: 60px;display: flex;flex-direction: row;justify-content:space-between">
        <div style="width: 100%;height: 60px">
          <el-button icon="el-icon-plus" style="margin-left: 10px" @click="dialogVisible = true">新增</el-button>
          <el-button icon="el-icon-delete" >批量删除</el-button>
        </div>
        <div>
          <el-dialog
            title="添加班级"
            :visible.sync="dialogVisible"
            width="50%">
<!--            :before-close="handleClose">-->
            <div>
              <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                <el-form-item label="班级名称">
                  <el-input v-model="formLabelAlign.name"></el-input>
                </el-form-item>
                <el-form-item label="班级简介">
                  <el-input v-model="formLabelAlign.region"></el-input>
                </el-form-item>
                <el-form-item label="班级人数">
                  <el-input v-model="formLabelAlign.type"></el-input>
                </el-form-item>
                <el-form-item label="班主任名">
                  <el-input v-model="formLabelAlign.type"></el-input>
                </el-form-item>

              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <div style="width: 45%;">
                    <el-form  :inline="true" :model="searchName" class="demo-form-inline" >
                      <el-form-item style="margin: 0px">
                        <el-input v-model="searchName.name" placeholder="请输入名称" ></el-input>
                        </el-form-item>
                      <el-form-item style="margin: 0px">
                        <el-button  @click="onSubmit" icon="el-icon-search"></el-button>
                      </el-form-item>
                    </el-form>
        </div>

      </div>
    </div>
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="image"
          label="封面"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="课程名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="brief"
          label="课程简介"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="teacher"
          label="授课老师"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="type"
          label="属性"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="time"
          label="创建时间"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          width="350px"
          label="操作"
          align="center">
          <template v-slot="scope">
            <el-button
              title="上传文件"
              icon="el-icon-folder-add"
              size="mini"
              >
            </el-button>
            <el-button
              title="修改"
              icon="el-icon-edit"
              size="mini"
              ></el-button>
            <el-button
              title="删除"
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="20">
    </el-pagination>
  </div>
</template>

<script>

export default {
  name: "courseManage",
  data() {
    return {
      dialogVisible: false,
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },

      tableData: [{
        image: '2016-05-02',
        name: '王小虎',
        brief: '上海市普陀区金沙江路 1518 弄',
        teacher: 'dd',
        type: 'ddd',
        time: 'ddd'
      }],
      searchName: {
        name: ''
      },
      currentPage4: 4,
      multipleSelection: [],
      dialogFormVisible:false,
      formLabelWidth: '120px'
    }
  },
  mounted() {
    // this.getCourse()
  },
  methods: {
    //全选按钮设置
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //获取课程信息
    getCourse: function(){
      //保存this,在回调函数内部无法使用this
      // var that = this;
      //异步访问
      this.$axios.get("https://autumnfish.cn/api/joke?num=3").then(
        function(resp){
          console.log(resp);
        }
      )
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    onSubmit() {
      console.log("submit!");
    },
    addCourse(){
    //  点击新增，打开对话框
      this.dialogFormVisible = true
    }
  }
};
</script>

<style scoped>

</style>